import React from 'react'
import { connect } from 'react-redux'
import {
  WriterWrapper,
  WriterHead,
  WriterItem
} from '../style.js'

class Writer extends React.Component{
  constructor(props){
    super(props)
  }
  render(){
    return (
      <WriterWrapper>
        <WriterHead>
          <h5 className="writer-left">推荐作者</h5>
          <span className="writer-right">
            <i className="iconfont spin">&#xe7e9;</i>
            换一批
          </span>
        </WriterHead>
        {
          this.props.list.map((item) => {
            return (
              <WriterItem key={item.get('id')}>
                <img className="writer-pic" src={item.get('imgUrl')} alt=""/>
                  <div className="desc-top">
                    <span className="writer-name">{item.get('name')}</span>
                    <span className="writer-atten">+关注</span>
                  </div>
                  <div className="writer-content">
                    <p >{item.get('content')}</p>
                  </div>
              </WriterItem>
            )
          })
        }
        
      </WriterWrapper>
    )
  }
}

const mapState = (state) => ({
  list: state.getIn(["home", "WriterList"])
})

export default connect(mapState, null)(Writer)